<template>
    <div>
        <Modal v-model="showModal" width="800" @on-cancel="rightClose" draggable>
            <p slot="header" style="color:#f60;text-align:center">
                {{ deploy_name }}<span>添加POD互斥调度</span>
            </p>
            <div style="">
                <Form ref="pod_anti_affinity" :model="pod_anti_affinity" :rules="pod_anti_affinity_rules" label-position="left"  inline :label-width="150">
                    <Form-Item label="互斥类型:" prop="type" style="width:350px">
                        <Select v-model="pod_anti_affinity.type">
                            <Option v-for="type in affinity_types" :key="type" :value="type">{{ type }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="标签选择器类型:" prop="match_type" style="width:350px">
                        <Select v-model="pod_anti_affinity.match_type">
                            <Option v-for="match_type in label_selector_types" :key="match_type" :value="match_type">{{ match_type }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="key:"  prop="key" style="width:350px">
                        <Input type="text"  v-model="pod_anti_affinity.key" />
                    </Form-Item>
                    <Form-Item label="选择operator:" prop="operator" style="width:350px">
                        <Select v-model="pod_anti_affinity.operator" >
                            <Option v-for="operator in pod_anti_affinity_operators" :key="operator" :value="operator">{{ operator }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="value:" prop="value" style="width:350px" >
                        <Input type="text" v-if="pod_anti_affinity.operator!='Exists' && pod_anti_affinity.operator!='DoesNotExist' " v-model="pod_anti_affinity.value"  />
                        <Input type="text" v-else placeholder="operator为Exists/DoesNotExist不需要value"  disabled/>
                    </Form-Item>
                    <Form-Item label="weight:" prop="weight" style="width:350px">
                        <Input type="number" v-if="pod_anti_affinity.type=='preferred'" v-model="pod_anti_affinity.weight"  />
                        <Input type="number" v-else placeholder="preferred互斥类型才需要填写"  disabled  />
                    </Form-Item>
                    <Form-Item label="topologyKey:"  prop="topologyKey" style="width:350px">
                        <Input type="text"  v-model="pod_anti_affinity.topologyKey" />
                    </Form-Item>
                </Form> 
               
            </div>
            <div slot="footer">
                <p style="text-align: left">说明1: key value 一般填写 deployment的selector 或者label的键值对</p>
                <p style="text-align: left">说明2: 只支持添加一项pod互斥调度，再添加会覆盖前面添加的"</p>
                <Button  size="default"  type="primary"   @click="submit_add_pod_anti_affinity('pod_anti_affinity')">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {k8s_namespace_post} from '@/api/http'
import {  add_pod_anti_affinity } from  '@/api'
export default ({
    name: 'addToletationModal',
    props: {
        isShow: {
            type: Boolean
        }, 
        deploy_name: {
            type: String
        },
    },
    data() {   
        const validateWeight = (rule,value,callback) => {
            if(value <1 || value > 100) {
                callback(new Error('请输入1-100整数'))
            }else{
                callback();
            }
        };
        return {
            showModal: false,

            pod_anti_affinity:{
                type: 'preferred',
                match_type: 'matchExpressions',
                key: '',
                operator: 'In',
                value: '',
                weight: 1,
                topologyKey: "kubernetes.io/hostname",
            },
            affinity_types:['preferred','required'],
            label_selector_types:['matchExpressions','matchLabels'],
            pod_anti_affinity_operators:['In','NotIn','Exists','DoesNotExist'],
            
            pod_anti_affinity_rules:{
                key: [
                    {required: true,message:'请输入key',trigger: 'blur'}
                ],
                weight: [
                    {trigger:'blur',transform(value){return Number(value);},validator: validateWeight}
                ],
            },
        }
    },
    methods: {
        rightClose(){
            this.$emit('closeModal')
        },
        // 提交pod互斥事件
        submit_add_pod_anti_affinity(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) validate = true
            })
            if(!validate) return
            let pod_anti_affinity = this.pod_anti_affinity
            let deploy_name = this.deploy_name
            let data={"name":deploy_name,"pod_anti_affinity":pod_anti_affinity}
            k8s_namespace_post(add_pod_anti_affinity,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加POD互斥调度成功')
                    this.$emit('addSuccess')
                    this.$emit('closeModal')
                }else {
                    alert(info)
                }
            })
            
        },
    },
    watch: {
        isShow(newv,oldv){
            console.log(oldv)
            this.showModal = newv;
        },
    },
})
</script>